<template>
  <div>
    <div>
      <span class="left"><van-icon name="arrow-left" @click="leftHello" /></span>
      <img src="../../../../public/image/roomimg/room (3).png" alt="" class="my_img1">
    </div>
    <div class="my_title">
      <span>客厅</span>
      <p>温度 26℃</p>
    </div>
    <div class="my_content">
      <div class="my_she">
        <span>设备</span>
      </div>
      <div class="my_fontlist">
        <div class="fontbox">
          <span class="iconfont icon-kongdiaogongcheng" @click="kong"></span>
        </div>
        <div class="fontbox">
          <span class="iconfont icon-deng"></span>
        </div>
        <div class="fontbox">
          <span class="iconfont icon-fengshan"></span>
        </div>
        <div class="fontbox">
          <span class="iconfont icon-linyu"></span>
        </div>
      </div>
      <div class="my_fangshe">
        <div>
          <span>开/关</span>
          <p>关闭它最多可节省100元/kwh</p>
        </div>
        <div><van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" /></div>
      </div>
      <div class="my_kai">
        <div class="my_kai1">
          <div>
            空调
          </div>
          <div class="my_kai2">
            <div class="my_zhuang"></div>
            <span>运行</span>
          </div>
        </div>
        <div><van-switch v-model="checked2" active-color="#7033FF" inactive-color="#FB8F66" /></div>
      </div>
      <div class="my_shezhibox">
        <div class="my_shezhi">
          <div class="my_shezhitop">
            <div>
              <span class="iconfont icon-icontubiao my_dufont"></span>
            </div>
            <div class="my_du">
              <span>22°</span>
              <p>摄氏度</p>
            </div>
          </div>
          <div class="my_shefont">
            <div class="iconfont icon-yueliang"></div>
            <div class="iconfont icon-taiyang"></div>
            <div class="iconfont icon-feng"></div>
            <div class="iconfont icon-shui"></div>
          </div>
        </div>
        <div class="my_tuo">
          <div class="my_tuodu">
            <div>14℃</div>
            <div>17℃</div>
            <div>24℃</div>
            <div>32℃</div>
            <div>37℃</div>
          </div>
          <div class="process-bar-outer" ref="outer" :style="outerStyle" @mousedown="handleOuter">
            <div class="process-bar-inner" :style="innerStyle"></div>
            <div class="process-bar-slider" :style="sliderStyle"></div>
          </div>
        </div>
      </div>
      <div class="my_shedu">
        <span>滑动可以设置温度</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import router from '../../../router';
const checked1 = ref(true)
const checked2 = ref()
const leftHello = () => {
  router.push('./Hello')
}
const kong = () => {
  router.push('./Conditioner')
}

// const dulist = reactive({
//   du: [
//     {
//       dutile: '14℃',
//     },
//     {
//       dutile: '17℃',
//     },
//     {
//       dutile: '24℃',
//     },
//     {
//       dutile: '32℃',
//     },
//     {
//       dutile: '37℃',
//     }
//   ]
// })
// let { du } = toRefs(dulist)

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  width: {
    type: Number,
    default: 320
  },
  height: {
    type: Number,
    default: 6
  },
  sliderWidth: {
    type: Number,
    default: 20
  }
})
const emit = defineEmits(['update:modelValue'])
const currPos = ref(Math.round(props.width * props.modelValue / 100));
const space = (props.sliderWidth - props.height) / 2;
let outerOffsetLeft: number;
let outer = ref(null);
let sliding = false;

const outerStyle = {
  width: props.width + 'px',
  height: props.height + 'px',
  borderRadius: props.height + 'px'
}
const innerStyle = computed(() => {
  return {
    width: currPos.value + 'px',
    borderRadius: props.height + 'px'
  }
})
const sliderStyle = computed(() => {
  return {
    width: props.sliderWidth + 'px',
    height: props.sliderWidth + 'px',
    top: -space + 'px',
    left: currPos.value - (props.sliderWidth / 2) + 'px'
  }
})

const handleOuter = (e: MouseEvent) => {
  sliding = true;
  currPos.value = handleBoundary(e.clientX - outerOffsetLeft)
}

const handleBoundary = (value: number) => {
  value = Math.min(props.width, value);
  value = Math.max(0, value);
  emit('update:modelValue', Math.round(value / props.width * 100))
  return value;
}

const handlMousemove = (e: MouseEvent) => {
  if (sliding) {
    currPos.value = handleBoundary(e.clientX - outerOffsetLeft)
  }
}

const handlMouseup = (e: MouseEvent) => {
  sliding = false;
  currPos.value = handleBoundary(e.clientX - outerOffsetLeft)
}

onMounted(() => {
  outerOffsetLeft = (outer.value as any).getBoundingClientRect().left;
  document.addEventListener('mousemove', handlMousemove)
  document.addEventListener('mouseup', handlMouseup)
})

onUnmounted(() => {
  document.removeEventListener('mousemove', handlMousemove)
  document.removeEventListener('mouseup', handlMouseup)
})

</script>
<style lang="scss" scoped>
.left {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font-size: 20px;
}

.my_img1 {
  width: 100%;
  height: 230px;
}

.my_title {
  position: absolute;
  top: 170px;
  left: 150px;
  line-height: 20px;
  text-align: center;
  color: #FFFFFF;
}

.my_content {
  padding: 1rem;

  .my_she {
    margin-top: 1rem;
  }

  .my_fontlist {
    height: 4.8rem;
    display: flex;
    justify-content: space-around;

    .fontbox {
      width: 4.8rem;
      height: 4.8rem;
      background-color: #F6F5FA;
      color: #ABA3CF;
      font-size: 3rem;
      line-height: 5rem;
      text-align: center;
      border-radius: 1.5rem;
    }

    .fontbox:hover {
      background-color: #7033FF;
      color: white;
    }
  }

  .my_fangshe {
    display: flex;
    justify-content: space-between;
    color: #ABA3CF;
    font-size: 1.5rem;
    margin-top: 1.5rem;
  }

  .my_kai {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .my_kai1 {
      display: flex;

    }

    .my_kai2 {
      display: flex;
      align-items: center;
      margin-left: 1rem;

      .my_zhuang {
        margin-right: 1rem;
        width: 1rem;
        height: 1rem;
        background-color: #98DE8E;
        border-radius: 50%;
      }
    }
  }

  .my_shezhibox {
    width: 35rem;
    height: 17.8rem;
    background-color: #352C5D;
    border-radius: 2rem;
    color: #FFFFFF;
    margin-top: 2.5rem;

    .my_shezhi {
      display: flex;
      justify-content: space-between;
      height: 8rem;

      .my_shezhitop {
        display: flex;
        line-height: 3rem;
        align-items: center;

        .my_dufont {
          color: #FB8F66;
          font-size: 3rem;
        }
      }

      .my_shefont {
        width: 15rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }

    .my_tuodu {
      display: flex;
      justify-content: space-around;
      line-height: 5rem;
    }
  }

  .my_shedu {
    text-align: center;
    line-height: 5rem;
    color: #352C5D;
  }

  div {
    box-sizing: border-box;
  }

  .process-bar-outer {
    caret-color: rgba(0, 0, 0, 0);
    position: relative;
    background-color: #ebeef5;
    margin-left: 1.5rem;


    .process-bar-inner {
      height: 100%;
      background-color: #FB8F66;
    }

    .process-bar-slider {
      position: absolute;
      border-radius: 50%;
      border: 0.16rem solid #FB8F66;
      background-color: #ABA3CF;
    }
  }

}
</style>